<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--<link rel="stylesheet" type="text/css"  media="screen" href="style/previous/citportal.css" />-->
<link rel="stylesheet" type="text/css"  media="screen, projection" href="style/previous/tutorial1.css" />
<script type="text/javascript">
    function checkAnswer(num)
    {
        var element = document.getElementById('answer');


        if(num==256)
        {
            element.style.border = "1px solid #000";
            element.innerHTML = "You are correct! There are two choices per option: <span style='color: red;'>Selected</span> and ";
            element.innerHTML += "<span style='color: red'>Unselected</span>. <br /><br />Since there are 8 options, with 2 choices each, we have 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2,2<sup>8</sup>, or 256  configurations.";
        }
        else
        {
            element.innerHTML = num + " is not the right answer. <br /><br />To find the answer,count the number of choices for each option and multiply the number of choices from all options together."
        }

    }

    function checkOA(num)
    {
        var element = document.getElementById('answer');

        if(num==4)
        {
            element.innerHTML = "Correct, N = 16, s = 2 for k = 6 columns and s = 4 for k = 3 columns with strength 2.";
        }
        else if(num==1)
        {
            element.innerHTML = "Incorrect, remember that N represents the number of rows";
        }
        else if(num==2)
        {
            element.innerHTML = "Incorrect, how many columns contain just 2 values?";
        }
        else if(num==3)
        {
            element.innerHTML = "Incorrect, look at the values of k and the total number of columns in the Mixed Orthogonal Array";
        }
        else if(num==5)
        {
            element.innerHTML = "Incorrect, remember the index is found by &#955=N/s<sup>t</sup>, what value do you get if t is equal to 3 and s is equal to 4? ";
        }

    }


    function next_step()
    {
        var i = 1;
        var frame = document.getElementById(i);
        document.getElementById('back_float').style.visibility="visible";
        while(frame)
        {
            if(frame.style.display == 'block')
            {
                make_visible = document.getElementById(i + 1);
                if(make_visible)
                {
                    frame.style.display = 'none';
                    make_visible.style.display = 'block';
                }
                i = i + 2;
                frame = document.getElementById(i);
                if(!frame)
                    document.getElementById('forward_float').style.visibility="hidden";
                break;
            }
            i = i + 1; 
            frame = document.getElementById(i);
        }
    }
    function page()
    {
        var i = 1;
        var check = <?php echo $start?>;
        if(check == i){
            var frame = document.getElementById(i);
            make_visible = document.getElementById(check);
            frame.style.display = 'none';
            make_visible.style.display = 'block';
        } 
        else{
            var frame = document.getElementById(i);
            make_visible = document.getElementById(check);
            frame.style.display = 'none';
            make_visible.style.display = 'block';
            document.getElementById('back_float').style.visibility="visible";
        }
    }

    function back_step()
    {
        var i = 1;
        var frame = document.getElementById(i);
        while(frame)
        {
            if(frame.style.display=='block')
            {
                make_visible = document.getElementById(i-1);
                if(make_visible)
                {
                    frame.style.display = 'none';
                    make_visible.style.display = 'block';
                    document.getElementById('forward_float').style.visibility="visible";
                }
                if(i==2) document.getElementById('back_float').style.visibility="hidden";
                break;
            }
            i = i + 1; 
            frame = document.getElementById(i);
        }

    }
</script>
<body onLoad="page( <?php echo $start?>)"> 
    <div id="container">
        <div id="header"><h3>Latin Square Tutorial</h3></div>
        <hr> 
        <div id="box">
            <div class="row">
                <a href="#" class="seven columns" id="back_float"onclick="back_step()" style='text-align: left; visibility:hidden; background-color: rgb(176, 209, 240)'>
                    <h4><i class="icon-left-bold"></i>Previous</h4>
                </a>

                <a href="#" class="seven columns" id="forward_float" onclick="next_step()" style="text-align: right; visibility: visible; background-color: rgb(176, 209, 240)">
                    <h4>Next <i class="icon-right-bold"></i></h4>
                </a>
            </div>
            <!--- box border --> 
            <div id="blc"><div id="brc"> 
                    <div id="tlc"><div id="trc"> 
                            <!--  -->	
                            <div class="rbcontent"> 

                                <!--Frame 1-->
                                <div id="1" style="display: block;">
                                    <div id="contentBox_wide_xl"><p>Objectives. </p></div>
                                    <div id="contentBox"><p>Latin Squares can be a very
                                            useful tool in the fields of combinatorics and experimental design. <br><br> This Tutorial will give a
                                            quick introduction to what Latin Squares are and why they are
                                            useful.</p></div>
                                    <div id="contentBox"><p> Goals:<br> <br>1. Understand
                                            what a Latin Square is <br><br> 2. Learn how Mutually
                                            Orthogonal Latin Squares can be combined to create Orthogonal Arrays</p></div>
                                </div>


                                <!--Frame 2-->
                                <div id="2" style="display: none;">
                                    <div id="contentBox_wide"><p>The definition of an
                                            Latin Square is as follows.  <br> <br>  An <span style="font-style:italic;">n</span>
                                            x <span style="font-style:italic;">n</span> array with <span style="font-style:italic;">n</span> 
                                            different characters occuring exactly once in each row and column.</p></div>
                                    <div id="contentBox"><p>Because of it's simple yet strict
                                            definition Latin Squares are quite easy to understand.</p></div>
                                    <div id="contentBox"><p>Let's look at a small example.</p></div>  
                                </div>

                                <!-- Frame 3 -->
                                <div id="3" style="display: none;">
                                    <div id="contentBox_wide_xl"><p>A Latin Square of size <span style="font-style:italic;">n</span> = 3 </p></div><br>
                                    <table style="width:50%;  margin-left:20%"><tbody><tr>
                                                <td><div id="contentBox_OA"><p>Because <span style="font-style:italic;">n</span> is equal to <span style="color: red;">3</span>, the height
                                                            and width are both <span style="color: red;">3</span> and the number of different characters in the
                                                            square is <span style="color: red;">3</span> as well. <br><br> See how {1,2,3} could
                                                            easily be replaced with {A,B,C} or any other set of 3 characters.</p></div></td>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>3</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td>1</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                            </tr></tbody></table>
                                </div>

                                <!--Frame 4-->
                                <div id="4" style="display: none;">
                                    <div id="contentBox_wide"><p>When the first row and
                                            column of a Latin Square are in their natural order the Latin
                                            Square is said to be reduced.  <br> <br> Note that Latin
                                            Squares of size <span style="font-style:italic;">n</span>&le;4 have more then 1 reduced form.</p></div>
                                    <div id="contentBox"><p>By permuting (reordering) the
                                            rows and columns of a Latin Square a different Latin Square
                                            can be created.</p></div>
                                    <div id="contentBox"><p>Let's take a look at how
                                            permutation can be used to get a Latin Square to it's reduced form.</p></div>  
                                </div>

                                <!-- Frame 5 -->
                                <div id="5" style="display: none;">
                                    <div id="contentBox_wide_xl"><p>A Latin Square of size <span style="font-style:italic;">n</span> = 4 </p></div><br>
                                    <table style="width:50%;  margin-left:20%"><tbody><tr>
                                                <td><div id="contentBox_OA"><p>Slightly larger then the earlier
                                                            example but still clearly a Latin Square. <br><br> However the
                                                            first row and column are not in their natural order (which in this
                                                            case would be alphabetical) so the Latin Square is not reduced.</p></div></td>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td style="background-color:orangered;">C</td>
                                                                    <td style="background-color:orangered;">D</td>
                                                                    <td style="background-color:orangered;">B</td>
                                                                    <td style="background-color:orangered;">A</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:orangered;">B</td>
                                                                    <td>A</td>
                                                                    <td>D</td>
                                                                    <td>C</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:orangered;">A</td>
                                                                    <td>B</td>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:orangered;">D</td>
                                                                    <td>C</td>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                            </tr></tbody></table>
                                </div>

                                <!-- Frame 6 -->
                                <div id="6" style="display: none;">
                                    <div id="contentBox_wide_xl"><p>A Latin Square of size <span style="font-style:italic;">n</span> = 4 </p></div><br>
                                    <table style="width:50%;  margin-left:20%"><tbody><tr>
                                                <td><div id="contentBox_OA"><p>For this Latin Square <span style="color: red;">row 3</span> is in the natural order.
                                                            <br><br> By switching <span style="color: red;">row 3</span> with <span style="color: red;">row 1</span> the first row of the
                                                            Latin Square is now in alphabetical order.</p></div></td>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid #E0EEEE; border-right:1px solid blue;"><img src="public/tutorials/images/green_right_cb.bmp"></td>
                                                                    <td style="background-color:orangered;">C</td>
                                                                    <td style="background-color:orangered;">D</td>
                                                                    <td style="background-color:orangered;">B</td>
                                                                    <td style="background-color:orangered;">A</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid #E0EEEE; border-right:1px solid blue;"></td>
                                                                    <td>B</td>
                                                                    <td>A</td>
                                                                    <td>D</td>
                                                                    <td>C</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid #E0EEEE; border-right:1px solid blue;"><img src="public/tutorials/images/green_right_cb.bmp"></td>
                                                                    <td style="background-color:lightgreen;">A</td>
                                                                    <td style="background-color:lightgreen;">B</td>
                                                                    <td style="background-color:lightgreen;">C</td>
                                                                    <td style="background-color:lightgreen;">D</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid #E0EEEE; border-right:1px solid blue;"></td>
                                                                    <td>D</td>
                                                                    <td>C</td>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                            </tr></tbody></table>
                                </div>

                                <!-- Frame 7 -->
                                <div id="7" style="display: none;">
                                    <div id="contentBox_wide_xl"><p>A Latin Square of size <span style="font-style:italic;">n</span> = 4 </p></div><br>
                                    <table style="width:50%;  margin-left:20%"><tbody><tr>
                                                <td><div id="contentBox_OA"><p>Another look at the Latin Square
                                                            reveals some good news. <br><br> The first column was placed in
                                                            order by switching around the first and third rows.  The Latin
                                                            Square is now reduced</p></div></td>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>e
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid #E0EEEE; border-right:1px solid #E0EEEE;"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"><img src="public/tutorials/images/green_down_cb.bmp"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid #E0EEEE; border-right:1px solid blue;"><img src="public/tutorials/images/green_right_cb.bmp"></td>
                                                                    <td style="background-color:lightgreen;">A</td>
                                                                    <td style="background-color:lightgreen;">B</td>
                                                                    <td style="background-color:lightgreen;">C</td>
                                                                    <td style="background-color:lightgreen;">D</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid #E0EEEE; border-right:1px solid blue;"></td>
                                                                    <td style="background-color:lightgreen;">B</td>
                                                                    <td>A</td>
                                                                    <td>D</td>
                                                                    <td>C</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid #E0EEEE; border-right:1px solid blue;"></td>
                                                                    <td style="background-color:lightgreen;">C</td>
                                                                    <td>D</td>
                                                                    <td>B</td>
                                                                    <td>A</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid #E0EEEE; border-right:1px solid blue;"></td>
                                                                    <td style="background-color:lightgreen;">D</td>
                                                                    <td>C</td>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                            </tr></tbody></table>
                                </div>

                                <!-- Frame 8 -->
                                <div id="8" style="display: none;">
                                    <div id="contentBox_wide"><p>Here are four different reduced
                                            Latin Squares of size <span style="font-style:italic;">n</span> = 4.  Is there a way to permute one of
                                            these arrays into any of the others? </p></div><br>
                                    <table style="width:50%;  margin-left:20%"><tbody>
                                            <tr><td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>B</td>
                                                                    <td>A</td>
                                                                    <td>D</td>
                                                                    <td>C</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                    <td>B</td>
                                                                    <td>A</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>D</td>
                                                                    <td>C</td>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>B</td>
                                                                    <td>A</td>
                                                                    <td>D</td>
                                                                    <td>C</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>D</td>
                                                                    <td>C</td>
                                                                    <td>B</td>
                                                                    <td>A</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td></tr>
                                            <tr><td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>B</td>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                    <td>A</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>D</td>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                    <td>C</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>B</td>
                                                                    <td>D</td>
                                                                    <td>A</td>
                                                                    <td>C</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>C</td>
                                                                    <td>A</td>
                                                                    <td>D</td>
                                                                    <td>B</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>D</td>
                                                                    <td>C</td>
                                                                    <td>B</td>
                                                                    <td>A</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td></tr>
                                        </tbody></table>
                                </div>

                                <!-- Frame 9 -->
                                <div id="9" style="display: none;">
                                    <div id="contentBox_wide"><p>The answer is no.  There is no way to permute a reduced Latin Square into a different 
                                            reduced Latin Square. </p></div><br>
                                    <table style="width:50%;  margin-left:20%"><tbody>
                                            <tr><td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>B</td>
                                                                    <td>A</td>
                                                                    <td>D</td>
                                                                    <td>C</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                    <td>B</td>
                                                                    <td>A</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>D</td>
                                                                    <td>C</td>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>B</td>
                                                                    <td>A</td>
                                                                    <td>D</td>
                                                                    <td>C</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>D</td>
                                                                    <td>C</td>
                                                                    <td>B</td>
                                                                    <td>A</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td></tr>
                                            <tr><td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>B</td>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                    <td>A</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>D</td>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                    <td>C</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td>A</td>
                                                                    <td>B</td>
                                                                    <td>C</td>
                                                                    <td>D</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>B</td>
                                                                    <td>D</td>
                                                                    <td>A</td>
                                                                    <td>C</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>C</td>
                                                                    <td>A</td>
                                                                    <td>D</td>
                                                                    <td>B</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>D</td>
                                                                    <td>C</td>
                                                                    <td>B</td>
                                                                    <td>A</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td></tr>
                                        </tbody></table>
                                </div>

                                <!--Frame 10-->
                                <div id="10" style="display: none;">
                                    <div id="contentBox_wide"><p>Robert Mandl suggested
                                            using Latin Squares as a basis for designing tests for compilers.  <br> <br> To do this 
                                            Mutually Orthogonal Latin Squares are needed.</p></div>
                                    <div id="contentBox"><p>Latin Squares are said to be
                                            orthogonal to each other if when one is superimposed on the
                                            other the ordered pairs formed by combining the corresponding
                                            entries consist of all possible pairs.</p></div>
                                    <div id="contentBox"><p>A simple example should help
                                            make this property more clear.</p></div>  
                                </div>

                                <!-- Frame 11 --> 
                                <div id="11" style="display: none;">
                                    <div id="contentBox_wide"> <p>Here is an example of a set of two
                                            mutually orthogonal Latin Squares.  It can be denoted <span style="color: red;">MOLS(5,2)</span> 
                                            where <font color="red">5</font> is the size of the Latin Squares and 
                                            <font color="red">2</font> is the number of squares in the set.</p> </div><br>
                                    <table style="width:50%;  margin-left:20%"><tbody><tr>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                            </tr></tbody></table>
                                </div>

                                <!-- Frame 12 -->
                                <div id="12" style="display: none;">
                                    <div id="contentBox_wide_xl"><p>Superimposed MOLS(5,2) </p></div><br>
                                    <table style="width:50%;  margin-left:20%"><tbody><tr>
                                                <td><div id="contentBox_OA"><p>Here it is shown that every
                                                            combination of two numbers appears excactly once. <br><br> It
                                                            is also possible to increase the size of this set of Mutually
                                                            Orthogonal Latin Squares.</p></div></td>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td>0,0</td>
                                                                    <td>1,1</td>
                                                                    <td>2,2</td>
                                                                    <td>3,3</td>
                                                                    <td>4,4</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1,2</td>
                                                                    <td>2,3</td>
                                                                    <td>3,4</td>
                                                                    <td>4,0</td>
                                                                    <td>0,1</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>2,4</td>
                                                                    <td>3,0</td>
                                                                    <td>4,1</td>
                                                                    <td>0,2</td>
                                                                    <td>1,3</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>3,1</td>
                                                                    <td>4,2</td>
                                                                    <td>0,3</td>
                                                                    <td>1,4</td>
                                                                    <td>2,0</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>4,3</td>
                                                                    <td>0,4</td>
                                                                    <td>1,0</td>
                                                                    <td>2,1</td>
                                                                    <td>3,2</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                            </tr></tbody></table>
                                </div>

                                <!--Frame 13-->
                                <div id="13" style="display: none;">
                                    <div id="contentBox_wide"><p>When dealing with a Latin
                                            square with a size that is a prime number <span style="font-style:italic;">n</span> 
                                            then the size of the largest possible set of Mutually Orthogonal Latin Squares is 
                                            equal to <span style="font-style:italic;">n</span>-1.  <br> <br> Creating the set is actually fairly easy if you have a
                                            starting Latin Square.</p></div>
                                    <div id="contentBox"><p>By starting every Latin Square
                                            in the set with the first row being in its natural order and then
                                            for each of the following rows simple change their order.</p></div>
                                    <div id="contentBox"><p>Starting with the last
                                            example here is how to create the remaining 2 Latin Squares
                                            in the set.</p></div>  
                                </div>

                                <!-- Frame 14 -->
                                <div id="14" style="display: none;">
                                    <div id="contentBox_wide_xl"><p>A Latin Square of size <span style="font-style:italic;">n</span> = 5 </p></div><br>
                                    <table style="width:50%;  margin-left:20%"><tbody><tr>
                                                <td><div id="contentBox_OA"><p>First begin with the reduced
                                                            Latin Square. <br><br> Notice how all the numbers are in their
                                                            natural order and when the row reaches the end of the set
                                                            it loops around to the begininng.</p></div></td>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                            </tr></tbody></table>
                                </div>

                                <!-- Frame 15 -->
                                <div id="15" style="display: none;">
                                    <div id="contentBox_wide_xl"><p>A Latin Square of size <span style="font-style:italic;">n</span> = 5 </p></div><br>
                                    <table style="width:50%;  margin-left:20%"><tbody><tr>
                                                <td><div id="contentBox_OA"><p>One way to build this Latin Square
                                                            is to take the second number in each new row as the first number in
                                                            the next row. <br><br> Starting with the natural order the
                                                            second number is <font color="red">1</font>, so start the next row with <font color="red">1</font>, second number
                                                            in that row is <font color="red">2</font>, so we start the next row with <font color="red">2</font> and so on.</p></div></td>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"><img src="public/tutorials/images/green_down_cb.bmp"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>0</td>
                                                                    <td style="background-color:gold;">1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:gold;">1</td>
                                                                    <td style="background-color:royalblue;">2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:royalblue;">2</td>
                                                                    <td style="background-color:lightgreen;">3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:lightgreen;">3</td>
                                                                    <td style="background-color:orangered;">4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:orangered;">4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                            </tr></tbody></table>
                                </div>

                                <!-- Frame 16 -->
                                <div id="16" style="display: none;">
                                    <div id="contentBox_wide_xl"><p>A Latin Square of size <span style="font-style:italic;">n</span> = 5 </p></div><br>
                                    <table style="width:50%;  margin-left:20%"><tbody><tr>
                                                <td><div id="contentBox_OA"><p>Now what happens if you do use
                                                            every third number instead. <br><br> Starting with the natural order the
                                                            third number is <font color="red">2</font>, so start the next row with <font color="red">2</font>, third number
                                                            in that row is <font color="red">4</font>, so we start the next row with <font color="red">4</font> and so on.</p></div></td>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"><img src="public/tutorials/images/green_down_cb.bmp"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td style="background-color:gold;">2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:gold;">2</td>
                                                                    <td>3</td>
                                                                    <td style="background-color:royalblue;">4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:royalblue;">4</td>
                                                                    <td>0</td>
                                                                    <td style="background-color:lightgreen;">1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:lightgreen;">1</td>
                                                                    <td>2</td>
                                                                    <td style="background-color:orangered;">3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:orangered;">3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                            </tr></tbody></table>
                                </div>


                                <!-- Frame 17 -->
                                <div id="17" style="display: none;">
                                    <div id="contentBox_wide"><p>Following this pattern you can
                                            create the set MOLS(<span style="font-style:italic;">n</span>,<span style="font-style:italic;">n</span>-1)
                                            where <span style="font-style:italic;">n</span> is a prime number.  Here are the
                                            Latin Squares of size <span style="font-style:italic;">n</span> = 5 using the fourth and fifth
                                            number respectivly.</p></div><br>
                                    <table style="width:50%;  margin-left:20%"><tbody><tr>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"><img src="public/tutorials/images/green_down_cb.bmp"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td style="background-color:gold;">3</td>
                                                                    <td>4</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:gold;">3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td style="background-color:royalblue;">1</td>
                                                                    <td>2</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:royalblue;">1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td style="background-color:lightgreen;">4</td>
                                                                    <td>0</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:lightgreen;">4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td style="background-color:orangered;">2</td>
                                                                    <td>3</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:orangered;">2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table class="ls">
                                                            <tbody>
                                                                <tr>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"></td>
                                                                    <td style="border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
                                                                        border-bottom:1px solid blue; border-right:1px solid #E0EEEE;"><img src="public/tutorials/images/green_down_cb.bmp"></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td style="background-color:gold;">4</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:gold;">4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td style="background-color:royalblue;">3</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:royalblue;">3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td style="background-color:lightgreen;">2</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:lightgreen;">2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td style="background-color:orangered;">1</td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="background-color:orangered;">1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                            </tr></tbody></table>
                                </div>

                                <!--Frame 18-->
                                <div id="18" style="display: none;">
                                    <div id="contentBox_wide" style="width:85%; margin-left:5%"><p>Now by substituting the
                                            values of each Latin Square with some relevant parameter you can
                                            design a series of tests that check different combinations of
                                            those parameters.  <br> <br> This was the key idea within
                                            Robert Mandle's 1985 paper.</p></div>
                                    <div id="contentBox"><p>In his example the Orthogonal
                                            Latin Squares were used to create compiler tests.  The idea was
                                            that testing combinations would be less costly then exhastive
                                            testing while being more structured then random testing.</p></div>
                                    <div id="contentBox"><p>The next step in this direction
                                            is to start using Orthogonal Arrays to generate tests (more detail about this later).
                                            For now a quick look at how they can be created by using Orthogonal Latin Squares.</p></div>  
                                </div>

                                <!--Frame 19-->
                                <div id="19" style="display: none;">
                                    <div id="contentBox_wide" style="width:85%; margin-left:5%"><p>Beccause of the property
                                            that all of the pairs formed by superimposing the set of MOLS
                                            are unique we can directly take those pairs and create rows of
                                            an Orthogonal Array out of them.  <br> <br> To further increase the size of the array add
                                            two columns to the orthogonal aray, one to represent which row
                                            and which column the pair is from on the original Latin Squares.</p></div>
                                    <div id="contentBox"><p>The dimensions for the new
                                            orthogonal array are <span style="font-style:italic;">N</span> = number of pairwise combinations, 
                                            <span style="font-style:italic;">k</span> = number of mutually orthagonal latin
                                            squares plus 2, <span style="font-style:italic;">s</span> = size of Latin Squares and 
                                            <span style="font-style:italic;">t</span> = strength of the test (in this case, t=2).</p></div>
                                    <div id="contentBox"><p>Let's take a look at what this
                                            orthogonal array will look like.</p></div>  
                                </div>

                                <!-- Frame 20 -->
                                <div id="20" style="display: none;">
                                    <table style="width:50%;  margin-left:20%"><tbody><tr>
                                                <td><div id="contentBox_OA"><p>And here is our OA(25,6,5,2). <br><br> In each row the first four columns correspond to the pairs our Latin Squares
                                                            created, the fifth column represents the column that pair is found
                                                            in, and the last column represents the row it was found in.</p></div></td>
                                                <td><div id="table_tutorial_two" style="width: 60%; margin-left: 20%;">
                                                        <table style="font-size:14px; padding:3px">
                                                            <tbody>
                                                                <tr>
                                                                    <td>0</td>
                                                                    <td>0</td>
                                                                    <td>0</td>
                                                                    <td>0</td>
                                                                    <td>0</td>
                                                                    <td>0</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1</td>
                                                                    <td>1</td>
                                                                    <td>1</td>
                                                                    <td>1</td>
                                                                    <td>1</td>
                                                                    <td>0</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>2</td>
                                                                    <td>2</td>
                                                                    <td>2</td>
                                                                    <td>2</td>
                                                                    <td>2</td>
                                                                    <td>0</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>3</td>
                                                                    <td>3</td>
                                                                    <td>3</td>
                                                                    <td>3</td>
                                                                    <td>3</td>
                                                                    <td>0</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>4</td>
                                                                    <td>4</td>
                                                                    <td>4</td>
                                                                    <td>4</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>1</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>1</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>4</td>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td>1</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>0</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                    <td>1</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>2</td>
                                                                    <td>4</td>
                                                                    <td>1</td>
                                                                    <td>3</td>
                                                                    <td>0</td>
                                                                    <td>2</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>3</td>
                                                                    <td>0</td>
                                                                    <td>2</td>
                                                                    <td>4</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>4</td>
                                                                    <td>1</td>
                                                                    <td>3</td>
                                                                    <td>0</td>
                                                                    <td>2</td>
                                                                    <td>2</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>0</td>
                                                                    <td>2</td>
                                                                    <td>4</td>
                                                                    <td>1</td>
                                                                    <td>3</td>
                                                                    <td>2</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1</td>
                                                                    <td>3</td>
                                                                    <td>0</td>
                                                                    <td>2</td>
                                                                    <td>4</td>
                                                                    <td>2</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>3</td>
                                                                    <td>1</td>
                                                                    <td>4</td>
                                                                    <td>2</td>
                                                                    <td>0</td>
                                                                    <td>3</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>4</td>
                                                                    <td>2</td>
                                                                    <td>0</td>
                                                                    <td>3</td>
                                                                    <td>1</td>
                                                                    <td>3</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>0</td>
                                                                    <td>3</td>
                                                                    <td>1</td>
                                                                    <td>4</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1</td>
                                                                    <td>4</td>
                                                                    <td>2</td>
                                                                    <td>0</td>
                                                                    <td>3</td>
                                                                    <td>3</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>2</td>
                                                                    <td>0</td>
                                                                    <td>3</td>
                                                                    <td>1</td>
                                                                    <td>4</td>
                                                                    <td>3</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>4</td>
                                                                    <td>3</td>
                                                                    <td>2</td>
                                                                    <td>1</td>
                                                                    <td>0</td>
                                                                    <td>4</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>0</td>
                                                                    <td>4</td>
                                                                    <td>3</td>
                                                                    <td>2</td>
                                                                    <td>1</td>
                                                                    <td>4</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1</td>
                                                                    <td>0</td>
                                                                    <td>4</td>
                                                                    <td>3</td>
                                                                    <td>2</td>
                                                                    <td>4</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>2</td>
                                                                    <td>1</td>
                                                                    <td>0</td>
                                                                    <td>4</td>
                                                                    <td>3</td>
                                                                    <td>4</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>3</td>
                                                                    <td>2</td>
                                                                    <td>1</td>
                                                                    <td>0</td>
                                                                    <td>4</td>
                                                                    <td>4</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div></td>
                                            </tr></tbody></table>
                                </div>

                                <!--Frame 21-->
                                <div id="21" style="display: none;">
                                    <div id="contentBox_wide_xl"><p>Recap. </p></div>
                                    <div id="contentBox"><p>This tutorial should give at least a basic understanding of reduced and 
                                            Mutually Orthogonal Latin Squares. <br><br>
                                            Because of their simple definition they make a great reference
                                            point when heading into more advanced areas of research.</p></div>
                                    <div id="contentBox"><p> Next:<br> <br></p>
                                    </div>
                                </div>
                                <div style="clear: both;"></div>
                            </div>

                        </div></div></div></div>
        </div>

        <div style="clear:none;"></div>
    </div>
</body>
<?php

function LS1() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
                   <tr>
                       <td>1</td>
                       <td>2</td>
                       <td>3</td>
                   </tr>
		   <tr>
                       <td>3</td>
                       <td>1</td>
                       <td>2</td>
                   </tr>
		   <tr>
                       <td>2</td>
                       <td>3</td>
                       <td>1</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function RLS1() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
                   <tr>
                       <td style='background-color:orangered;'>C</td>
                       <td style='background-color:orangered;'>D</td>
                       <td style='background-color:orangered;'>B</td>
		       <td style='background-color:orangered;'>A</td>
                   </tr>
		   <tr>
                       <td style='background-color:orangered;'>B</td>
                       <td>A</td>
                       <td>D</td>
		       <td>C</td>
                   </tr>
		   <tr>
                       <td style='background-color:orangered;'>A</td>
                       <td>B</td>
		       <td>C</td>
		       <td>D</td>
                   </tr>
		   <tr>
                       <td style='background-color:orangered;'>D</td>
                       <td>C</td>
		       <td>A</td>
		       <td>B</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function RLS2() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
                   <tr>
		       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid #E0EEEE; border-right:1px solid blue;'><img src='public/tutorials/images/green_right_cb.bmp'/></td>
                       <td style='background-color:orangered;'>C</td>
                       <td style='background-color:orangered;'>D</td>
                       <td style='background-color:orangered;'>B</td>
		       <td style='background-color:orangered;'>A</td>
                   </tr>
		   <tr>
		       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid #E0EEEE; border-right:1px solid blue;'></td>
                       <td>B</td>
                       <td>A</td>
                       <td>D</td>
		       <td>C</td>
                   </tr>
		   <tr>
		       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid #E0EEEE; border-right:1px solid blue;'><img src='public/tutorials/images/green_right_cb.bmp'/></td>
                       <td style='background-color:lightgreen;'>A</td>
                       <td style='background-color:lightgreen;'>B</td>
		       <td style='background-color:lightgreen;'>C</td>
		       <td style='background-color:lightgreen;'>D</td>
                   </tr>
		   <tr>
		       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid #E0EEEE; border-right:1px solid blue;'></td>
                       <td>D</td>
                       <td>C</td>
		       <td>A</td>
		       <td>B</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function RLS3() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
			   <tr>
				       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid #E0EEEE; border-right:1px solid #E0EEEE;'></td>
					   <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'><img src='public/tutorials/images/green_down_cb.bmp'/></td>
					   <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
					   <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
					   <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
                   </tr>
                   <tr>
				       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid #E0EEEE; border-right:1px solid blue;'><img src='public/tutorials/images/green_right_cb.bmp'/></td>
                       <td style='background-color:lightgreen;'>A</td>
                       <td style='background-color:lightgreen;'>B</td>
                       <td style='background-color:lightgreen;'>C</td>
		       <td style='background-color:lightgreen;'>D</td>
                   </tr>
					<tr>
						<td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid #E0EEEE; border-right:1px solid blue;'></td>
                       <td style='background-color:lightgreen;'>B</td>
                       <td>A</td>
                       <td>D</td>
						<td>C</td>
                   </tr>
					<tr>
					<td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid #E0EEEE; border-right:1px solid blue;'></td>
                       <td style='background-color:lightgreen;'>C</td>
                       <td>D</td>
						<td>B</td>
						<td>A</td>
                   </tr>
					<tr>
					<td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid #E0EEEE; border-right:1px solid blue;'></td>
                       <td style='background-color:lightgreen;'>D</td>
                       <td>C</td>
						<td>A</td>
						<td>B</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function RLS4() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
                   <tr>
                       <td>A</td>
                       <td>B</td>
                       <td>C</td>
		       <td>D</td>
                   </tr>
		   <tr>
                       <td>B</td>
                       <td>A</td>
                       <td>D</td>
		       <td>C</td>
                   </tr>
		   <tr>
                       <td>C</td>
                       <td>D</td>
		       <td>B</td>
		       <td>A</td>
                   </tr>
		   <tr>
                       <td>D</td>
                       <td>C</td>
		       <td>A</td>
		       <td>B</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function RLS5() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
                   <tr>
                       <td>A</td>
                       <td>B</td>
                       <td>C</td>
		       <td>D</td>
                   </tr>
		   <tr>
                       <td>B</td>
                       <td>A</td>
                       <td>D</td>
		       <td>C</td>
                   </tr>
		   <tr>
                       <td>C</td>
                       <td>D</td>
		       <td>A</td>
		       <td>B</td>
                   </tr>
		   <tr>
                       <td>D</td>
                       <td>C</td>
		       <td>B</td>
		       <td>A</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function RLS6() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
                   <tr>
                       <td>A</td>
                       <td>B</td>
                       <td>C</td>
		       <td>D</td>
                   </tr>
		   <tr>
                       <td>B</td>
                       <td>C</td>
                       <td>D</td>
		       <td>A</td>
                   </tr>
		   <tr>
                       <td>C</td>
                       <td>D</td>
		       <td>A</td>
		       <td>B</td>
                   </tr>
		   <tr>
                       <td>D</td>
                       <td>A</td>
		       <td>B</td>
		       <td>C</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function RLS7() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
                   <tr>
                       <td>A</td>
                       <td>B</td>
                       <td>C</td>
		       <td>D</td>
                   </tr>
		   <tr>
                       <td>B</td>
                       <td>D</td>
                       <td>A</td>
		       <td>C</td>
                   </tr>
		   <tr>
                       <td>C</td>
                       <td>A</td>
		       <td>D</td>
		       <td>B</td>
                   </tr>
		   <tr>
                       <td>D</td>
                       <td>C</td>
		       <td>B</td>
		       <td>A</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function LS2() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
                   <tr>
                       <td>0</td>
                       <td>1</td>
                       <td>2</td>
		       <td>3</td>
		       <td>4</td>
                   </tr>
		   <tr>
                       <td>1</td>
                       <td>2</td>
                       <td>3</td>
		       <td>4</td>
		       <td>0</td>
                   </tr>
		   <tr>
                       <td>2</td>
                       <td>3</td>
                       <td>4</td>
		       <td>0</td>
		       <td>1</td>
                   </tr>
		   <tr>
                       <td>3</td>
                       <td>4</td>
                       <td>0</td>
		       <td>1</td>
		       <td>2</td>
                   </tr>
		   <tr>
                       <td>4</td>
                       <td>0</td>
                       <td>1</td>
		       <td>2</td>
		       <td>3</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function LS3() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
                   <tr>
                       <td>0</td>
                       <td>1</td>
                       <td>2</td>
		       <td>3</td>
		       <td>4</td>
                   </tr>
		   <tr>
                       <td>2</td>
                       <td>3</td>
                       <td>4</td>
		       <td>0</td>
		       <td>1</td>
                   </tr>
		   <tr>
                       <td>4</td>
                       <td>0</td>
                       <td>1</td>
		       <td>2</td>
		       <td>3</td>
                   </tr>
		   <tr>
                       <td>1</td>
                       <td>2</td>
                       <td>3</td>
		       <td>4</td>
		       <td>0</td>
                   </tr>
		   <tr>
                       <td>3</td>
                       <td>4</td>
                       <td>0</td>
		       <td>1</td>
		       <td>2</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function LS4() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
                   <tr>
                       <td>0</td>
                       <td>1</td>
                       <td>2</td>
		       <td>3</td>
		       <td>4</td>
                   </tr>
		   <tr>
                       <td>3</td>
                       <td>4</td>
                       <td>0</td>
		       <td>1</td>
		       <td>2</td>
                   </tr>
		   <tr>
                       <td>1</td>
                       <td>2</td>
                       <td>3</td>
		       <td>4</td>
		       <td>0</td>
                   </tr>
		   <tr>
                       <td>4</td>
                       <td>0</td>
                       <td>1</td>
		       <td>2</td>
		       <td>3</td>
                   </tr>
		   <tr>
                       <td>2</td>
                       <td>3</td>
                       <td>4</td>
		       <td>0</td>
		       <td>1</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function LS5() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
                   <tr>
                       <td>0</td>
                       <td>1</td>
                       <td>2</td>
		       <td>3</td>
		       <td>4</td>
                   </tr>
		   <tr>
                       <td>4</td>
                       <td>0</td>
                       <td>1</td>
		       <td>2</td>
		       <td>3</td>
                   </tr>
		   <tr>
                       <td>3</td>
                       <td>4</td>
                       <td>0</td>
		       <td>1</td>
		       <td>2</td>
                   </tr>
		   <tr>
                       <td>2</td>
                       <td>3</td>
                       <td>4</td>
		       <td>0</td>
		       <td>1</td>
                   </tr>
		   <tr>
                       <td>1</td>
                       <td>2</td>
                       <td>3</td>
		       <td>4</td>
		       <td>0</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function arrowLS2() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
		    <tr>
                       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
                       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'><img src='public/tutorials/images/green_down_cb.bmp'/></td>
                       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
		       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
		       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
                   </tr>
                   <tr>
                       <td>0</td>
                       <td style='background-color:gold;'>1</td>
                       <td>2</td>
		       <td>3</td>
		       <td>4</td>
                   </tr>
		   <tr>
                       <td style='background-color:gold;'>1</td>
                       <td style='background-color:royalblue;'>2</td>
                       <td>3</td>
		       <td>4</td>
		       <td>0</td>
                   </tr>
		   <tr>
                       <td style='background-color:royalblue;'>2</td>
                       <td style='background-color:lightgreen;'>3</td>
                       <td>4</td>
		       <td>0</td>
		       <td>1</td>
                   </tr>
		   <tr>
                       <td style='background-color:lightgreen;'>3</td>
                       <td style='background-color:orangered;'>4</td>
                       <td>0</td>
		       <td>1</td>
		       <td>2</td>
                   </tr>
		   <tr>
                       <td style='background-color:orangered;'>4</td>
                       <td>0</td>
                       <td>1</td>
		       <td>2</td>
		       <td>3</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function arrowLS3() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
		    <tr>
                       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
                       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
                       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'><img src='public/tutorials/images/green_down_cb.bmp'/></td>
		       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
		       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
                   </tr>
                   <tr>
                       <td>0</td>
                       <td>1</td>
                       <td style='background-color:gold;'>2</td>
		       <td>3</td>
		       <td>4</td>
                   </tr>
		   <tr>
                       <td style='background-color:gold;'>2</td>
                       <td>3</td>
                       <td style='background-color:royalblue;'>4</td>
		       <td>0</td>
		       <td>1</td>
                   </tr>
		   <tr>
                       <td style='background-color:royalblue;'>4</td>
                       <td>0</td>
                       <td style='background-color:lightgreen;'>1</td>
		       <td>2</td>
		       <td>3</td>
                   </tr>
		   <tr>
                       <td style='background-color:lightgreen;'>1</td>
                       <td>2</td>
                       <td style='background-color:orangered;'>3</td>
		       <td>4</td>
		       <td>0</td>
                   </tr>
		   <tr>
                       <td style='background-color:orangered;'>3</td>
                       <td>4</td>
                       <td>0</td>
		       <td>1</td>
		       <td>2</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function arrowLS4() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
		   <tr>
                       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
                       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
                       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
		       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'><img src='public/tutorials/images/green_down_cb.bmp'/></td>
		       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
                   </tr>
                   <tr>
                       <td>0</td>
                       <td>1</td>
                       <td>2</td>
		       <td style='background-color:gold;'>3</td>
		       <td>4</td>
                   </tr>
		   <tr>
                       <td style='background-color:gold;'>3</td>
                       <td>4</td>
                       <td>0</td>
		       <td style='background-color:royalblue;'>1</td>
		       <td>2</td>
                   </tr>
		   <tr>
                       <td style='background-color:royalblue;'>1</td>
                       <td>2</td>
                       <td>3</td>
		       <td style='background-color:lightgreen;'>4</td>
		       <td>0</td>
                   </tr>
		   <tr>
                       <td style='background-color:lightgreen;'>4</td>
                       <td>0</td>
                       <td>1</td>
		       <td style='background-color:orangered;'>2</td>
		       <td>3</td>
                   </tr>
		   <tr>
                       <td style='background-color:orangered;'>2</td>
                       <td>3</td>
                       <td>4</td>
		       <td>0</td>
		       <td>1</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function arrowLS5() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
		   <tr>
                       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
                       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
                       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
		       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'></td>
		       <td style='border-top:1px solid #E0EEEE; border-left:1px solid #E0EEEE;
			 border-bottom:1px solid blue; border-right:1px solid #E0EEEE;'><img src='public/tutorials/images/green_down_cb.bmp'/></td>
                   </tr>
                   <tr>
                       <td>0</td>
                       <td>1</td>
                       <td>2</td>
		       <td>3</td>
		       <td style='background-color:gold;'>4</td>
                   </tr>
		   <tr>
                       <td style='background-color:gold;'>4</td>
                       <td>0</td>
                       <td>1</td>
		       <td>2</td>
		       <td style='background-color:royalblue;'>3</td>
                   </tr>
		   <tr>
                       <td style='background-color:royalblue;'>3</td>
                       <td>4</td>
                       <td>0</td>
		       <td>1</td>
		       <td style='background-color:lightgreen;'>2</td>
                   </tr>
		   <tr>
                       <td style='background-color:lightgreen;'>2</td>
                       <td>3</td>
                       <td>4</td>
		       <td>0</td>
		       <td style='background-color:orangered;'>1</td>
                   </tr>
		   <tr>
                       <td style='background-color:orangered;'>1</td>
                       <td>2</td>
                       <td>3</td>
		       <td>4</td>
		       <td>0</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function MOLS1() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='ls'>
               <tbody>
                   <tr>
                       <td>0,0</td>
                       <td>1,1</td>
                       <td>2,2</td>
		       <td>3,3</td>
		       <td>4,4</td>
                   </tr>
		   <tr>
                       <td>1,2</td>
                       <td>2,3</td>
                       <td>3,4</td>
		       <td>4,0</td>
		       <td>0,1</td>
                   </tr>
		   <tr>
                       <td>2,4</td>
                       <td>3,0</td>
                       <td>4,1</td>
		       <td>0,2</td>
		       <td>1,3</td>
                   </tr>
		   <tr>
                       <td>3,1</td>
                       <td>4,2</td>
                       <td>0,3</td>
		       <td>1,4</td>
		       <td>2,0</td>
                   </tr>
		   <tr>
                       <td>4,3</td>
                       <td>0,4</td>
                       <td>1,0</td>
		       <td>2,1</td>
		       <td>3,2</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function OA1() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table style='font-size:14px; padding:3px'>
               <tbody>
                   <tr>
                       <td>0</td>
                       <td>0</td>
                       <td>0</td>
		       <td>0</td>
		       <td>0</td>
		       <td>0</td>
                   </tr>
		   <tr>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
		       <td>1</td>
		       <td>1</td>
		       <td>0</td>
                   </tr>
		   <tr>
                       <td>2</td>
                       <td>2</td>
                       <td>2</td>
		       <td>2</td>
		       <td>2</td>
		       <td>0</td>
                   </tr>
		   <tr>
                       <td>3</td>
                       <td>3</td>
                       <td>3</td>
		       <td>3</td>
		       <td>3</td>
		       <td>0</td>
                   </tr>
		   <tr>
                       <td>4</td>
                       <td>4</td>
                       <td>4</td>
		       <td>4</td>
		       <td>4</td>
		       <td>0</td>
                   </tr>
		   <tr>
                       <td>1</td>
                       <td>2</td>
                       <td>3</td>
		       <td>4</td>
		       <td>0</td>
		       <td>1</td>
                   </tr>
		   <tr>
                       <td>2</td>
                       <td>3</td>
                       <td>4</td>
		       <td>0</td>
		       <td>1</td>
		       <td>1</td>
                   </tr>
		   <tr>
                       <td>3</td>
                       <td>4</td>
                       <td>0</td>
		       <td>1</td>
		       <td>2</td>
		       <td>1</td>
                   </tr>
		   <tr>
                       <td>4</td>
                       <td>0</td>
                       <td>1</td>
		       <td>2</td>
		       <td>3</td>
		       <td>1</td>
                   </tr>
		   <tr>
                       <td>0</td>
                       <td>1</td>
                       <td>2</td>
		       <td>3</td>
		       <td>4</td>
		       <td>1</td>
                   </tr>
		   <tr>
                       <td>2</td>
                       <td>4</td>
                       <td>1</td>
		       <td>3</td>
		       <td>0</td>
		       <td>2</td>
                   </tr>
		   <tr>
                       <td>3</td>
                       <td>0</td>
                       <td>2</td>
		       <td>4</td>
		       <td>1</td>
		       <td>2</td>
                   </tr>
		   <tr>
                       <td>4</td>
                       <td>1</td>
                       <td>3</td>
		       <td>0</td>
		       <td>2</td>
		       <td>2</td>
                   </tr>
		   <tr>
                       <td>0</td>
                       <td>2</td>
                       <td>4</td>
		       <td>1</td>
		       <td>3</td>
		       <td>2</td>
                   </tr>
		   <tr>
                       <td>1</td>
                       <td>3</td>
                       <td>0</td>
		       <td>2</td>
		       <td>4</td>
		       <td>2</td>
                   </tr>
		   <tr>
                       <td>3</td>
                       <td>1</td>
                       <td>4</td>
		       <td>2</td>
		       <td>0</td>
		       <td>3</td>
                   </tr>
		   <tr>
                       <td>4</td>
                       <td>2</td>
                       <td>0</td>
		       <td>3</td>
		       <td>1</td>
		       <td>3</td>
                   </tr>
		   <tr>
                       <td>0</td>
                       <td>3</td>
                       <td>1</td>
		       <td>4</td>
		       <td>2</td>
		       <td>3</td>
                   </tr>
		   <tr>
                       <td>1</td>
                       <td>4</td>
                       <td>2</td>
		       <td>0</td>
		       <td>3</td>
		       <td>3</td>
                   </tr>
		   <tr>
                       <td>2</td>
                       <td>0</td>
                       <td>3</td>
		       <td>1</td>
		       <td>4</td>
		       <td>3</td>
                   </tr>
		   <tr>
                       <td>4</td>
                       <td>3</td>
                       <td>2</td>
		       <td>1</td>
		       <td>0</td>
		       <td>4</td>
                   </tr>
		   <tr>
                       <td>0</td>
                       <td>4</td>
                       <td>3</td>
		       <td>2</td>
		       <td>1</td>
		       <td>4</td>
                   </tr>
		   <tr>
                       <td>1</td>
                       <td>0</td>
                       <td>4</td>
		       <td>3</td>
		       <td>2</td>
		       <td>4</td>
                   </tr>
		   <tr>
                       <td>2</td>
                       <td>1</td>
                       <td>0</td>
		       <td>4</td>
		       <td>3</td>
		       <td>4</td>
                   </tr>
		   <tr>
                       <td>3</td>
                       <td>2</td>
                       <td>1</td>
		       <td>0</td>
		       <td>4</td>
		       <td>4</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}